/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="model-training-wrap">
        <common-title
            :title-name="_('任务管理')" />
        <div class="model-training-container">
            <empty-panel 
                v-if="showEmptytraining" 
                :title="_('暂时没有训练任务记录')" 
                :text="_('可前往“特征探索”模块提交训练任务')" />
            <singer-update-table />  
            <!-- <sf-tab-panel ref="optionsTabpanel"
                          class="data-source__tab"
                          size="large"
                          :tab-width="136"
                          :title-hide="true">
                <sf-tab-item :title="_('单次训练')">
                    <singer-update-table />    
                </sf-tab-item>
                <sf-tab-item :title="_('定时训练')">
                    <update-time-table />
                </sf-tab-item>
            </sf-tab-panel> -->
        </div>
    </div>
</template>
<script>
import EmptyPanel from 'src/components/empty_panel';

import SingerUpdateTable from './singer_update_table.vue';

// import UpdateTimeTable from './update_time_table.vue';

import commonTitle from '../component/common_title.vue';
export default {
    name: 'ModelTraining',
    components:{
        EmptyPanel,
        commonTitle,
        SingerUpdateTable

        // UpdateTimeTable
    },
    mounted () {

        // this.$refs.optionsTabpanel.setActiveItem(+this.$route.query.periodic || 0);
    },
    data () {
        return {
            showEmptytraining:false
        };
    }
};
</script>
<style lang="less">
    .line-through{
        text-decoration: line-through;
    }
    .task-preview-detail__container{
        height:100%;
        border:1px solid #ddd;
        .detail-tab{
            height: 100%;
        }
        .sfv-tabpanel_wrap{
            height: calc(100% - 44px);
        }
        .tabpanel-body-item{
                height: 100%;
        }
       
    }
     .task-detail__container {
        height: 100%;
        margin-top: -7px;
        .sfv-scrollbar-body{
            height: 100%;
            .sf-drawer__body{
                height: 100%;
            }
        }
        .sf-drawer__header{
            font-size: 16px;
            color: #14161A;
        }
        .table-data{
            height: 100%;
            .sfv-grid{
                border: none;
                height: 100%;
                display: flex;
                flex-direction: column;
                .sfv-table{
                    flex: 1;
                }
            }
        }
        .sfv-tabpanel .sfv-tabpanel_header .sfv-tabpanel_scroll{
                border-bottom: 1px solid #DEE3ED;
        }
        .sfv-tabpanel.sfv-tabpanel--large .sfv-tabpanel_header .sfv-tabpanel_item{
            background: #fff;
            height: 45px;
            line-height: 45px;
        }
    }
    .model-training-wrap{
        height: calc(100% - 65px);
    }
    @-webkit-keyframes animal {
        0%{
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }
        100%{
            transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
        }
    }
    .model-training-container{
        
        height: calc(100% - 18px);
        background: #fff;
        border: 1px solid #ddd;
        flex: 1;
        overflow: auto;
        .sfv-toolbar_inner{
            border-bottom: none;
        }
        .data-source__tab{
            margin: 0 8px;
            height: calc(100% - 20px);
            .sfv-tabpanel_header{
                border-bottom: 1px solid #ddd;
                height: 41px;
            }
        }
        .sfv-tabpanel_wrap{
            height: calc(100% - 22px);
            .tabpanel-body-item{
                height: 100%;
            }
        }
        .table-data {
            height: 100%;
            .sfv-grid {
                /* border: none; */
                height: 100%;
                display: flex;
                flex-direction: column;

                .sfv-table {
                    flex: 1;
                }
            }
    
            .task-flex{
                display: flex;
                align-items: center;
            }
            
                
        }
    }

</style>
